<template>
  <div class="ringDiagram">
    <Echarts :option="option"></Echarts>
  </div>
</template>

<script setup lang="ts">
import Echarts from "@/components/echartsTemplate/index.vue";
import { reactive } from "vue";
const data = [1700, 800, 1700, 600, 800, 1700];
const data2 = [2600, 1400, 3350, 1400, 1400, 3350];
const colorArr2 = ["rgba(11, 83, 128)", "rgba(2, 143, 224)", "rgba(11, 83, 128)"];
const colorArr = ["rgb(12, 109, 122)", "rgba(1, 241, 228)", "rgb(12, 109, 122)"];

var color = {
  type: "linear",
  x: 0,
  x2: 1,
  y: 0,
  y2: 0,
  colorStops: [
    {
      offset: 0,
      color: colorArr[0],
    },
    {
      offset: 0.5,
      color: colorArr[0],
    },
    {
      offset: 0.5,
      color: colorArr[1],
    },
    {
      offset: 1,
      color: colorArr[1],
    },
  ],
};
var color2 = {
  type: "linear",
  x: 0,
  x2: 1,
  y: 0,
  y2: 0,
  colorStops: [
    {
      offset: 0,
      color: colorArr2[0],
    },
    {
      offset: 0.5,
      color: colorArr2[0],
    },
    {
      offset: 0.5,
      color: colorArr2[1],
    },
    {
      offset: 1,
      color: colorArr2[1],
    },
  ],
};
var barWidth = 30;
const option = reactive({
  tooltip: {
    trigger: 'axis',
    formatter: function (params) {
      var str = params[0].name + ":";
      params.filter(function (item) {
        if (item.componentSubType == "bar") {
          str += "<br/>" + item.seriesName + "：" + item.value;
        }
      });
      return str;
    },
  },
  //图表大小位置限制
  grid: {
    x: '10%',
    x2: '5%',
    y: '15%',
    y2: '15%',
  },
  xAxis: {
    data: ['1月', '2月', '3月', '4月', '5月', '6月'],
    //坐标轴
    axisLine: {
      show: true,
      lineStyle: {
        width: 1,
        type: 'dashed',//线的类型 虚线
        color: '#DEDEDE',
      },
      textStyle: {
        color: '#fff',
        fontSize: '10'
      }
    },
    type: 'category',
    axisLabel: {
      textStyle: {
        color: '#C5DFFB',
        fontWeight: 500,
        fontSize: '14'
      }
    },
    axisTick: {
      textStyle: {
        color: '#fff',
        fontSize: '16'
      },
      show: false,
    },
  },
  yAxis: {
    nameTextStyle: {
      color: '#DEDEDE',
      fontSize: 12,
      padding: 10,
    },
    min: 0,//最小
    max: 3500,//最大
    interval: 500,//相差
    type: 'value',
    splitLine: {
      show: true,
      lineStyle: {
        type: 'dashed',//线的类型 虚线0
        opacity: 0.2//透明度
      },
    },
    axisTick: {
      show: false
    },
    axisLine: {
      show: false,
    },
    //坐标值标注
    axisLabel: {
      show: true,
      textStyle: {
        color: '#C5DFFB',
      }
    },
  },
  series: [
    //中
    {
      z: 1,
      name: '绿色',
      type: "bar",
      barWidth: barWidth,
      barGap: "0%",
      data: data,
      itemStyle: {
        normal: {
          color: color,
          //柱形图上方标题
          label: {
            show: true,
            position: 'top',
            textStyle: {
              color: 'rgb(1, 255, 250)',
              fontSize: 8
            }
          },
        }
      },
    },
    //下
    {
      z: 2,
      name: '绿色',
      type: "pictorialBar",
      data: data.map(item => item + 90),
      symbol: "diamond",
      symbolOffset: ["-75%", "50%"],
      symbolSize: [barWidth, 10],
      itemStyle: {
        normal: {
          color: color
        },
      },
      tooltip: {
        show: false,
      },
    },
    //上
    {
      z: 3,
      name: '绿色',
      type: "pictorialBar",
      symbolPosition: "end",
      data: data,
      symbol: "diamond",
      symbolOffset: ["-85%", "-60%"],
      symbolSize: [barWidth - 4, (10 * (barWidth - 4)) / barWidth],
      itemStyle: {
        normal: {
          borderWidth: 2,
          color: colorArr[2]
        },
      },
      tooltip: {
        show: false,
      },
    },
    {
      z: 1,
      name: '蓝色',
      type: "bar",
      barWidth: barWidth,
      barGap: "50%",
      data: data2,
      itemStyle: {
        normal: {
          color: color2,
          //柱形图上方标题
          label: {
            show: true,
            position: 'top',
            textStyle: {
              color: 'rgb(2, 157, 246)',
              fontSize: 8
            }
          },
        }
      },
    },
    {
      z: 2,
      name: '蓝色',
      type: "pictorialBar",
      data: data2.map(item => item + 90),
      symbol: "diamond",
      symbolOffset: ["75%", "50%"],
      symbolSize: [barWidth, 10],
      itemStyle: {
        normal: {
          color: color2
        },
      },
      tooltip: {
        show: false,
      },
    },
    {
      z: 3,
      name: '蓝色',
      type: "pictorialBar",
      symbolPosition: "end",
      data: data2,
      symbol: "diamond",
      symbolOffset: ["75%", "-50%"],
      symbolSize: [barWidth - 4, (10 * (barWidth - 4)) / barWidth],
      itemStyle: {
        normal: {
          borderWidth: 2,
          color: colorArr2[2]
        },
      },
      tooltip: {
        show: false,
      },
    },
  ],
})

</script>

<style scoped lang="scss">
.ringDiagram {
  height: 100%;
}
</style>
